<!--
 * @Date: 2023-09-20 11:09:09
 * @LastEditTime: 2023-10-11 15:43:24
 * 介绍:
-->
<script lang="ts" setup>
import { omitText } from "@@/utils/tools/format";
import dayjs from "dayjs";
import {
  apiTaskArbitrateVote,
  ApiTaskArbitrateVote,
  ApiTaskDetails,
} from "@@/api/wk/index";
import { uploadImages } from "@@/api/module/upload";
import { CinputImage } from "@@/components/common/CinputImages/index";
import { FormInstance } from "vant";
import { isNonNullStr } from "@@/utils/tools/is";
import myTaskArbitrate from "./myTaskArbitrate.vue";
import { WkTaskStatus } from "@@/enum/globalEnum";
import { useRactionSheetRef } from "@@/components/rework/RactionSheet/index";
import { ApiTaskArbitrateList } from "@@/api/wk/list";

const props = defineProps<{
  task_id: number;
  isMyTask: boolean;
  isOthers: boolean;
  isMyOrderTask: boolean;
  details: ApiTaskDetails.Data;
  arbitration: Omit<ApiTaskArbitrateList.DataItem, "task"> | undefined;
  refresh: () => void;
}>();

const btnLoading = reactive({
  submit: false,
});

let images: CinputImage[] = [];

const form = reactive<ApiTaskArbitrateVote.Req>({
  task_id: props.task_id,
  arbitrate_id: -1,
  result: -1,
  result_images: "",
  result_title: "",
});
enum Vote {
  /**支持雇主 */
  myTask = 1,
  /**支持雇员 */
  myOrderTask = 2,
  /**未投票 */
  void = 0,
}
const { t } = useI18n();
function open(item: ApiTaskDetails.TaskArbitrate, vote: Vote) {
  form.arbitrate_id = item.id;
  form.result = vote;
  RactionSheetRef.value?.open({ title: t("can-yu-zhong-cai") });
}
async function submit() {
  btnLoading.submit = true;
  form.result_images = await uploadImages(images).catch(() => {
    btnLoading.submit = false;
    return Promise.reject();
  });
  const res = await apiTaskArbitrateVote(form);
  btnLoading.submit = false;
  if (!res) return;
  props.refresh();
  RactionSheetRef.value?.close();
}
const vanFormRef = ref<FormInstance>();
const RactionSheetRef = useRactionSheetRef();

const lastArbitrate = computed(() => props.details.task_arbitrate.at(-1));
const showResultTag = computed(
  () =>
    props.details.status === WkTaskStatus.COMPLETE &&
    !!props.details.task_arbitrate.length &&
    lastArbitrate.value?.result != Vote.void
);
const isSuccess = computed(() => {
  const lastResult = lastArbitrate.value?.result;
  return (
    (lastResult == Vote.myTask && props.isMyTask) ||
    (lastResult == Vote.myOrderTask && props.isMyOrderTask) ||
    props.isOthers
  );
});
</script>
<template>
  <div class="MT-xl">
    <RactionSheet
      :close-on-click-overlay="!btnLoading.submit"
      ref="RactionSheetRef"
    >
      <VanDivider />
      <div class="PD-md">
        <van-form @submit="submit" ref="vanFormRef">
          <div class="auto-MT-md">
            <div class="C-T4">{{ $t("shuo-ming") }}</div>
            <Ccard class="MT-xs PD-sm">
              <Rinput
                v-model="form.result_title"
                required
                :placeholder="$t('qing-tian-xie-gai-zi-duan')"
                :type="'textarea'"
                :autosize="{ minHeight: 0, maxHeight: 200 }"
                maxlength="256"
                showWordLimit
                :rules="[
                  {
                    validator: isNonNullStr,
                    message: $t('qing-tian-xie-gai-zi-duan'),
                  },
                ]"
              />
            </Ccard>
            <div class="C-T4">{{ $t("tianJiaPingZheng") }}</div>
            <CinputImages
              class="MT-sm"
              @change="(e) => (images = e)"
              :maxLength="3"
            />
          </div>
        </van-form>
        <Rbutton
          class="MT-md"
          @click="vanFormRef?.submit()"
          :loading="btnLoading.submit"
          :size="'large'"
          bg="var(--C-LG1)" borderStyle="none"
        >
          <span v-if="form.result == Vote.myOrderTask">
            {{ $t("zhi-chi-wei-ke") }}
          </span>
          <span v-else-if="form.result == Vote.myTask">
            {{ $t("zhi-chi-gu-zhu") }}
          </span>
        </Rbutton>
      </div>
    </RactionSheet>
    <div
      class="MT-md"
      v-for="(item, index) in props.details.task_arbitrate"
      :key="item.id"
    >
      <Ccard class="auto-MT-sm">
        <h3 v-if="item.apply_user_type == 1">
          {{ $t("gu-zhu-zhong-cai-shuo-ming") }}
        </h3>
        <h3 v-else-if="item.apply_user_type == 2">
          {{ $t("wei-ke-zhong-cai-shuo-ming") }}
        </h3>
        <div class="C-T3">
          {{ item.title }}
        </div>
        <CimagesPreview v-if="item.images" :images="item.images" />
        <div class="T-A-R T-S-sm">
          {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
        <div class="T-A-C MT-lg" v-if="arbitration?.can_arbitrate === 0">
          {{ $t("nin-wu-xu-tou-piao") }}
        </div>
        <div
          v-else-if="props.isOthers && item.result === Vote.void"
          class="flex-J-SE MT-lg"
          style="gap: var(--gap-md)"
        >
          <Rbutton
            @click="open(item, Vote.myOrderTask)"
            bg="var(--C-LG1)" borderStyle="none"
            :size="'large'"
          >
            {{ $t("zhi-chi-wei-ke") }}
          </Rbutton>
          <Rbutton
            @click="open(item, Vote.myTask)"
            bg="var(--C-LG1)" borderStyle="none"
            :size="'large'"
          >
            {{ $t("zhi-chi-gu-zhu") }}
          </Rbutton>
        </div>
      </Ccard>

      <Ccard v-if="item.result != 0" class="MT-sm auto-MT-sm">
        <h3>{{ $t("pan-jue-jie-guo") }}</h3>
        <h3 class="C-T3">{{ item.result_title }}</h3>
        <div
          :class="item.apply_user_type == item.result ? 'C-success' : 'C-fail'"
        >
          <van-icon
            v-if="item.apply_user_type == item.result"
            name="checked"
            color="var(--C-success)"
          />
          <van-icon v-else name="clear" color="var(--C-fail)" />
          <span v-if="item.result === Vote.myTask" class="ML-xs">
            {{ $t("zhong-cai-yuan-zhi-chi-gu-zhu") }}
          </span>
          <span v-else-if="item.result === Vote.myOrderTask" class="ML-xs">
            {{ $t("zhong-cai-yuan-zhi-chi-wei-ke") }}
          </span>
        </div>

        <CimagesPreview
          v-if="item.result_images"
          class="MT-md"
          :images="item.result_images || undefined"
        />
        <VanDivider class="MT-md MB-md" />
        <CcopyText class="C-T3 MT-0" :copy-text="item.order_user_address">
          {{ $t("zhong-cai-yuan") }}
          {{ omitText(item.order_user_address) }}
        </CcopyText>
        <myTaskArbitrate
          :refresh="refresh"
          :details="props.details"
          :id="item.id"
          class="PT-md PB-md"
          v-if="
            props.isMyTask &&
            props.details.status === WkTaskStatus.ARBITRATION &&
            item === props.details.task_arbitrate.at(-1)
          "
        />
        <div
          class="resultTag"
          :class="{
            resultTag__fail: !isSuccess,
          }"
          v-if="showResultTag && item === props.details.task_arbitrate.at(-1)"
        >
          <span v-if="lastArbitrate?.result == Vote.myTask">
            {{ $t("ciRenWuZiJinGuiGuZhuSuoYou") }}
          </span>
          <span v-else-if="lastArbitrate?.result == Vote.myOrderTask">
            {{ $t("ciRenWuZiJinGuiWeiKeSuoYou") }}
          </span>
        </div>
      </Ccard>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.resultTag {
  text-align: center;
  padding: var(--gap-sm) 0;
  border-radius: var(--R-sm);
  color: var(--C-success);
  background-color: var(--C-success-O2);
}

.resultTag__fail {
  color: var(--C-fail);
  background-color: var(--C-fail-O2);
}
</style>
